<template>
  <div id="docHome">
    <el-container>
      <el-header style="text-align: right">
        <el-row :gutter="20">
          <el-col :span="3">MPSMS商城管理系统</el-col>
          <el-col :span="6" :offset="15">
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link" style="width: 40px">{{ user.realname }}<i
                  class="el-icon-arrow-down el-icon--right"></i></span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="a">登出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <img width="60px" height="60px" :src="user.headurl" alt="" style="vertical-align: middle;margin-top: -5px">
          </el-col>
        </el-row>

      </el-header>
      <el-container>
        <el-aside width="200px">
          <div style="width: 200px;height: 120px;line-height: 0;background: rgb(84 92 100)">
            <div class="demo-basic--circle">
              <div class="block" style="padding-top: 20px;padding-bottom: 20px">
                <el-avatar :size="50" :src="user.headurl"></el-avatar>
              </div>
              <span style="color: #cccccc">欢迎您！{{ user.realname }}。</span>
            </div>
          </div>
          <el-menu
              default-active="2"
              class="el-menu-vertical-demo"
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#ffd04b"
              :router="true">
            <el-menu-item index="1" :route="String('/home/userhome')">
              <!--个人信息选项-->
              <template slot="title">
                <i class="el-icon-setting"></i>
                <span slot="title" @click="selectTabs('个人信息','/home/userhome')">个人信息</span>
              </template>
            </el-menu-item>
            <!--相关权限-->
            <el-submenu :index="String(menu.id)" v-for="menu in menus">
              <template slot="title">
                {{ menu.title }}
              </template>
              <el-menu-item :route="child.href" :index="child.id.toString()" v-for="child in menu.childMenu">
                <i :class="child.icon"></i>
                <a style="color: white;text-decoration: none" @click="selectTabs(child.title,child.href)">
                  &nbsp;&nbsp;{{ child.title }}
                </a>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-container>
          <el-main>
            <!--标签页-->
            <el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit">
              <el-tab-pane
                  :key="item.name"
                  v-for="(item, index) in editableTabs"
                  :label="item.title"
                  :name="item.name"
              >
                <router-view/>
              </el-tab-pane>
            </el-tabs>
          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "home",
  // 这里定义数据信息
  data() {
    return {
      // 登录用户的信息
      user: {},
      // 默认第一个表单
      editableTabsValue: '1',
      // 标签的列表
      editableTabs: [
        {
          title: '个人信息',
          name: '1',
          url: "/components/userhome"
          //content: 'Tab 1 content'
        }
      ],
      tabIndex: 1,
      // 菜单们
      menus: [],
    }
  },
  created() {
    this.initPage()
  },
  // 这里定义方法
  methods: {
    // 初始化页面，需要拿到的有用户的详细信息以及左边的菜单信息。
    initPage() {
      this.$http.post("/User/Msg").then(resp => {
        this.user = resp.data.data
        this.$http.get("/User/Menu/" + this.user.userid).then(resp => {
          this.menus = resp.data.data
        })
      })
    },
    // 标签添加和删除的方法
    handleTabsEdit(targetName, action) {
      if (action === 'remove') {
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                if (nextTab.url === '/components/userhome') {
                  this.$router.push('/home/userhome')
                }else {
                  this.$router.push(nextTab.url)
                  activeName = nextTab.name;
                }
              }
            }
          });
        }
        this.editableTabsValue = activeName;
        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
      }
    },
    // 当点击左侧的选项时在让他展示到中间的标签栏中
    selectTabs(targetName, url) {
      let newTabName = ++this.tabIndex + '';
      //获取所有的标签页
      let tabs = this.editableTabs;
      //定义是否已经标签变量
      let isHaveTab = false;
      //循环所有页签页 判断当前点击标签页名称已经存在
      tabs.forEach((tab, index) => {
        //如果为true 说明当前点击节点（部门管理），已经存在标签页
        if (targetName === tab.title) {
          isHaveTab = true;
          newTabName = tab.name;
        }
      });
      //如果不存在 添加一个
      if (!isHaveTab) {
        this.editableTabs.push({
          title: targetName,
          name: newTabName,
          url: url
        });
      }
      //如果存在，直接让高亮
      this.editableTabsValue = newTabName;

    },
    // 登出的方法
    handleCommand() {
      this.$notify({
        title: "账号密码",
        message: "用户登出",
        duration: 4000
      })
      // 清除token
      localStorage.setItem("userToken", "")
      // 刷新页面
      this.$router.push("/")
    }
  },

}
</script>

<style scoped>
body {
  margin: 0;
  padding: 0;
}

.el-header, .el-footer {
  background-color: #3995a1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  color: #333;
  text-align: center;
  line-height: 800px;
  height: 1000px;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 20px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.el-dropdown-link {
  font-size: 20px;
  cursor: pointer;
  color: #555e5d;
}

.el-icon-arrow-down {
  font-size: 20px;
}
</style>
